<template>
    <div class='signature' style="width: 100%">
<!-- <el-form :model="form" :rules="rules" ref='formSignature' label-width="125" style="width: 100%">
    <el-form-item :label="label" prop="signature" style="width: 100%"> -->
        <el-input v-model="signature" @click="focus" @input="updateValue" :placeholder="'请输入' + label" />
  <!-- </el-form-item>
  </el-form> -->
  <el-dialog :close-on-click-modal="false" v-model="dialogVisible"  width="600">
    <h3 class='h3'>签名验证</h3>
    <el-form :model="form" :rules="rules" ref="formSignature" label-width="125" style="width: 100%;margin-top:20px">
      <el-form-item label="用户名" prop="userName" style="width: 100%">
        <el-input v-model="form.userName" disabled   @click="focus" :placeholder="'请输入'"  />
      </el-form-item>
      <el-form-item label="密码" prop="passWord" style="width: 100%;margin-top:20px">
        <el-input v-model="form.passWord" type='password' @click="focus" :placeholder="'请输入'"  />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
    </div>
  
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref } from "vue";
const form = reactive({
    userName: "",
    passWord: "",
});
import useUserStore from "@/store/modules/user";
const dialogVisible = ref(false);
const signature = ref();
const formSignature = ref();
const userInfo = useUserStore();
console.log(userInfo.userInfo);
form.userName = userInfo.userInfo.userName
const rules = reactive({
    userName: [{ required: true, message: "用户名不能为空", trigger: "blur,change" }],
    passWord: [{ required: true, message: "密码不能为空", trigger: "blur,change" }],

});
const props = defineProps({
  label: {
    type: String,
    default: "签名",
  },
});
const emit = defineEmits(["focus","update:modelValue"]);

function focus() {
  if (!signature.value) {
    dialogVisible.value = true;
  }
//   emit("change");
}
function confirm(){
    dialogVisible.value = false;
}
const updateValue = (event) => {
    console.log(event);
  emit('update:modelValue', event);
};
</script>

<style>
h3{
    position: absolute;
    top:0;
}
</style>
